/**
 * Created by xuxiaoqi on 2017/9/18.
 */
import React from 'react'
import {Button, Card, Icon, message, Popconfirm, Table} from 'antd'
import Styles from '../../../finance/common/detail/Index.less'
import {fetchPost} from '../../../../utils/request'

class CheckRecord extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userCode: props.userCode,
      tradeNo: props.tradeNo,
      loading: false,
      list: [],
      message: '',
      timer: null
    }
  }

  componentWillReceiveProps(props) {
    if (this.state.userCode !== props.userCode) {
      this.setState({
        userCode: props.userCode,
        tradeNo: props.tradeNo
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount() {
    this.getData()
  }

  getData() {
    this.setState({
      loading: true
    })
    if (this.state.userCode) {
      fetchPost(`/order/${this.state.userCode}/list`).then(json => {
        if (json.code === 0) {
          if (json.data != null) {
            this.setState({
              list: json.data.itemList,
              loading: false
            })
          }
        } else {
          this.setState({
            list: [],
            loading: false,
            message: json.msg
          })
        }
      })
    } else {
      this.setState({
        list: [],
        loading: false
      })
    }
  }

  message() {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon type='info-circle-o'/> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }

  closeOrder(record) {
    if (record && record.tradeNo) {
      fetchPost(`/order/order/close`, {
        tradeNo: record.tradeNo
      }).then(json => {
        if (json.code === 0) {
          message.info('success')
          this.getData()
        } else {
          message.error(json.msg)
        }
      })
    }
  }

  componentWillUnmount() {
    clearTimeout(this.state.timer)
  }

  render() {
    const columns = [
      {
        title: 'Loan ID',
        dataIndex: 'tradeNo',
        key: 'tradeNo'
      },
      {
        title: 'Apply Time',
        dataIndex: 'createdDt',
        key: 'createdDt'
      },
      // {
      //   title: 'E-Sign Date',
      //   dataIndex: 'signDate',
      //   key: 'signDate'
      // },
      {
        title: 'Bank Card',
        dataIndex: 'bankNo',
        key: 'bankNo'
      },
      {
        title: 'Bank Name',
        dataIndex: 'bankName',
        key: 'bankName'
      },
      {
        title: 'Amount',
        dataIndex: 'realCapital',
        key: 'realCapital'
      },
      {
        title: 'Period(DAY)',
        dataIndex: 'productDuration',
        key: 'productDuration',
      },
      {
        title: 'Status',
        dataIndex: 'orderStatus',
        key: 'orderStatus'
      },
      {
        title: 'Product Type',
        dataIndex: 'productName',
        key: 'productName'
      },
      {
        title: 'Operate',
        dataIndex: 'closeAllow',
        key: 'closeAllow',
        render: (text, record) => {
          return record.closeAllow ?
            <Popconfirm placement='top' title={'Confirm?'} onConfirm={() => this.closeOrder(record)}>
              <Button type='primary' size='small'>Close Order</Button>
            </Popconfirm>
            : null
        }
      }
    ]

    return (
      <div className={`${Styles.checkRecord} ${Styles.partRight}`}>
        <Card title='Apply Record' extra={this.message()}
              bodyStyle={{padding: 1, height: 300, overflow: 'auto', textAlign: 'center'}} noHovering={true}>
          <Table
            pagination={false}
            size='small'
            bordered
            dataSource={this.state.list}
            columns={columns}
            loading={this.state.loading}
          />
        </Card>
      </div>

    )
  }
}

export default CheckRecord
